<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">公司配置新建</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm()"
          >提交</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="mt30">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司logo:">
              <el-upload
                action="#"
                list-type="picture-card"
                :on-change="onUploadType"
                :auto-upload="false"
                :limit="1"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
                :on-exceed="onExceed"
                ref="fileUpload"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-delete"
                      @click="onRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司名称:" prop="name">
              <el-input v-model="form.name" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="生产商:" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入生产商" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="委托方:" prop="client">
              <el-input v-model="form.client" placeholder="请输入委托方" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="模板配置:" prop="electronicAntiTemplateId">
              <el-select v-model="form.electronicAntiTemplateId" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in electronicAntiTemplateList"
                  :key="item.id"
                  :label="item.templateName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公众号二维码地址:" prop="officialAccount">
              <el-input v-model="form.officialAccount" placeholder="请输入公众号二维码地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="跳转地址:" prop="attachJumpLink">
              <el-input v-model="form.attachJumpLink" placeholder="请输入跳转地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="扫码次数限制:" prop="scanCodeTimes">
              <el-input v-model="form.scanCodeTimes" placeholder="请输入扫码次数限制" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { antiCodeCompanyConfigAdd, antiCodeTemplateList } from "@/api/system/antiCode/antiCode"
import { uploadImg } from "@/api/system/upload/upload"
export default {
  name: "add",
  data(){
    return {
      form: {
        logo: '', // logo
        name: '', // 公司名称
        manufacturer: '', // 生产商
        client: '', // 委托方
        electronicAntiTemplateId: '', // 模板配置id
        officialAccount: '', // 公众号二维码地址
        attachJumpLink: '', // 跳转地址
        scanCodeTimes: '', // 扫码次数限制
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "公司名称不能为空",}
        ],
      },
      electronicAntiTemplateList: []
    }
  },
  created() {
    this.getAntiCodeTemplateList()
  },
  methods: {
    // 获取模版
    getAntiCodeTemplateList(){
      antiCodeTemplateList().then(res => {
        this.electronicAntiTemplateList = res.rows
      })
    },
    // 上传logo
    onUploadType(item){
      // console.log(item)
      this.$modal.loading("正在上传")
      let formData = new FormData()
      let file = item.raw
      formData.append('file', file)
      uploadImg(formData).then(res => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess("上传成功")
        this.form.logo= res.data.fileUrl
      })
    },
    onExceed(){
      this.$modal.msgError('只能上传一张图片!')
    },
    // 图片删除
    onRemove(item){
      let uploadFiles = this.$refs['fileUpload'].uploadFiles
      let index = uploadFiles.indexOf(item)
      uploadFiles.splice(index, 1)
      this.form.logo = ''
    },
    // 提交数据
    submitForm(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading("正在提交")
          antiCodeCompanyConfigAdd(this.form).then(res=> {
            if(res.code == 200){
              this.$tab.closeOpenPage({ path: "/antiCode/corporation/list" })
              this.$modal.msgSuccess("新建成功")
              this.$modal.closeLoading()
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-upload--picture-card{
  border-color:#DCDFE6;
  background:#fff;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #5ED4D4;
}
::v-deep .el-upload--picture-card:hover .el-icon-plus{
  color: #5ED4D4;
}
::v-deep .el-table__empty-block{
  display: none;
}
</style>